<template>
    <div class="menus-box"  v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="tabs">
            <el-tabs :tab-position="tabPosition" style="height: 200px;" @tab-click="tabClick">
                <el-tab-pane
                    :label="item.appName"
                    v-for="(item,index) in leftMenuList"
                    :key="item.id"
                ></el-tab-pane>
            </el-tabs>
        </div>
        <div class="role-right">
            <div v-if="appId=='lhzd'">
            <!--查询面板-->
            <SearchPanel ref="searchPanel" :search-config="searchConfig" @startSearch="startSearch">
                <el-form-item>
                    <el-button
                        icon="el-icon-plus"
                        type="primary"
                        size="mini"
                        @click="addOrUpdateHandle(null,1)"
                    >新增</el-button>
                    <el-button
                        icon="el-icon-delete"
                        type="danger"
                        size="mini"
                        :disabled="dateSelectOptions.length==0"
                        @click="batchDelete()"
                    >批量删除</el-button>
                </el-form-item>
            </SearchPanel>

            <!-- 查询结果 -->
            <ResultListPanel
                tableRef="table"
                ref="multipleTable"
                :checkBoxEnable="true"
                :data="dataList?dataList:[]"
                :listConfig="resultColConfig"
                :listLoading="listLoading"
                @actionClick="actionClick"
                @paginationChange="paginationChange"
                :tagTextExchange="tagTextExchange"
                @selectionChange="selectionChange"
            ></ResultListPanel>
        </div>
        <div class="no-data" v-else>暂无数据</div>
        </div>
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateDom" @refreshDataList="getList"></add-or-update>
    </div>
</template>
<script>
import addOrUpdate from './add-or-update';
import { INDEX_SEARCH_CONFIG, INDEX_SEARCH_RESULT_ITEMS } from './config';
import ResultListPanel from '../../components/ResultListPanel';
import SearchPanel from '../../components/SearchPanel';
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
import {mapGetters} from 'vuex'
export default {
    components: {
        addOrUpdate,
        ResultListPanel,
        SearchPanel
    },
    data() {
        return {
            tabPosition: 'left',
            dataForm: {},
            dataListLoading: false,
            addOrUpdateVisible: false,
            leftMenuList: [],
            appId: 'lhzd',
            dialogVisible: false,
            dialogTitle: '新增',
            dateSelectOptions: [], // 选中的
            // 搜索项配置
            searchConfig: INDEX_SEARCH_CONFIG,
            resultColConfig: INDEX_SEARCH_RESULT_ITEMS,
            listLoading: false, // 数据列表显示状态
            dataList: [], //  数据列表
            /* 分页查询数据 */
            pageSize: 10,
            pageNum: 1,
            totalPage: 0,
            /* 查询条件参数 */
            addForm: {
                name: ''
            },
            type: 1,
            loading:false
        };
    },
    computed:{
        ...mapGetters({orgList:'orgList'})
    },
    watch:{
        orgList(val) {
            console.log(val)
            console.log('发生了为化')
            this.getLeftMenus();
        },
    },
    mounted() {
        this.getLeftMenus();
    },
    methods: {
        getLeftMenus() {
            var params = {
                pageNum: 1,
                pageSize: 1000
            };
            this.loading = true
            API.systemManger.systemList(params).then((res) => {
                this.leftMenuList = res.data.rows;
                this.appId = res.data.rows[0].appId;
                 this.loading = false
                this.getList();
            });
        },
        // 去功能权限页面
        functionPower(row) {
            this.$router.push({ path: '/functionPower/index', query: { appId: row.appId, roleId: row.id } });
        },
        // 去 app权限页面
        appPower(row) {
            this.$router.push({ path: '/appPower/index', query: { appId: row.appId, roleId: row.id } });
        },

        tabClick(tab, event) {
            this.appId = this.leftMenuList[tab.index]['appId'];
        },
        /***
         * 触发 行操作按钮
         * @param data
         * @param item
         */
        actionClick([data, item]) {
            if (item.alias === 'edit') {
                this.addOrUpdateHandle(data, 2);
            } else if (item.alias === 'del') {
                this.delete(data);
            } else if (item.alias === 'capacity') {
                // 功能权限
                this.functionPower(data);
            } else if (item.alias === 'app') {
                // app权限
                this.appPower(data);
            }
        },
        tagTextExchange(item) {
            var status = '';
            for (var k in item) {
                if (item[k].roleType == 0) {
                    status = '可授权';
                } else if (item[k].status == 1) {
                    status = '不可授权';
                } else if (item[k].status == 6) {
                    status = '超级管理员';
                }
            }
            return status;
        },
        // 选择角色
        selectionChange(val) {
            console.log(val);
            this.dateSelectOptions = val;
        },
        // 新增或者编辑
        addOrUpdateHandle(items, type) {
            this.addOrUpdateVisible = true;
            this.$nextTick(() => {
                // 编辑
                if (type == 2) {
                    this.listLoading = true
                    API.role.editRoleDetail({ id: items.id, appId: this.appId }).then((res) => {
                        if (res.code == 20000000) {
                            console.log(this.appId);
                            this.$refs.addOrUpdateDom.init(res.data, type, this.appId);
                        }
                        this.listLoading = false
                    });
                } else {
                    this.$refs.addOrUpdateDom.init(null, type, this.appId);
                }
            });
        },
        /**
         * 分页器发生改变
         * @param page
         */
        paginationChange(page) {
            this.pageSize = page.pageSize;
            this.pageNum = page.pageNo;
            this.getList();
        },
        /***
         * 搜索面板出发搜索事件
         * @param params
         */
        startSearch(params) {
            this.dataForm = params;
            this.pageNum = 1;
            this.$set(this.$refs.multipleTable['pageParams'], 'pageNum', 1);

            this.getList();
        },
        // 删除
        delete(row) {
            console.log(row);
            this.$alert('您确定要删除该条数据吗?', '', {
                confirmButtonText: '确定',
                callback: (action) => {
                    API.role.deleteSigleRole({ id: row.id }).then((res) => {
                        if (res.code == 20000000) {
                            this.$message({
                                type: 'success',
                                message: `删除成功`
                            });
                            this.getList();
                        }
                    });
                }
            });
        },
        //批量删除
        batchDelete() {
            this.$alert('您确定要执行批量删除操作吗?', '', {
                confirmButtonText: '确定',
                callback: (action) => {
                    var data = this.dateSelectOptions;
                    var dealData = [];
                    for (var k in data) {
                        dealData.push(data[k].id);
                    }
                    API.role.deleteBatchRole(JSON.stringify(dealData)).then((res) => {
                        if (res.code == 20000000) {
                            this.$message({
                                type: 'success',
                                message: `删除成功`
                            });
                            this.getList();
                        }
                    });
                }
            });
        },
        // 编辑
        Edit(data) {
            this.type = 2;
            this.dialogVisible = true;
            console.log(data);
            this.addForm = {
                appId: data.appId,
                appName: data.appName,
                pid: data.pid,
                appType: data.appType,
                callback: data.callback
            };
        },
        getList() {
            let params = cloneDeep(this.dataForm);
            if (this.$store.state.user.instId) {

           
            console.log(this.$store.state);
            params.pageNum = this.pageNum;
            params.pageSize = this.pageSize;
            params['appId'] = this.appId;
            params['instId'] = this.$store.state.user.instId;
            params['instSub'] = this.$store.state.user.instSub;
            this.listLoading = true;
             this.loading = true
            API.role.getRoleList(params).then((res) => {
                this.listLoading = false;
                 this.loading = false
                if (res.code == 20000000) {
                    this.totalPage = res.data.total;
                    this.dataList = res.data.rows;
                    this.$set(this.$refs.multipleTable['pageParams'], 'total', res.data.total);
                }
            });
        }
    }
    }
};
</script>
<style scoped>
.menus-box {
    background: #fff;
    padding: 20px;
    min-height: 100%;
}
.menus-box .tabs {
    float: left;
    width: 15%;
}
.menus-box .role-right {
    float: right;
    width: 83%;
}
.no-data {
    text-align: center;
    color: #ccc;
    font-size: 14px;
    margin-top: 80px;
}
</style>